<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 在网页中引入axios的js文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
    <h1>06-axios的拦截器</h1>
    <button>加载</button>
    <script>
        // 获取按钮节点
        const btn = document.querySelector("button");

        // 使用axios拦截器来对Ajax请求和响应进行处理。
        //添加请求拦截器* （常用于放置令牌token）
        axios.interceptors.request.use(config => {
            console.log('请求拦截器成功'); 
            // 在请求拦截器中为请求添加配置信息
            config.params = {ids:100,m:200}; // 添加的get请求参数
            config.data = {name:"aaa",num:300}; // 添加post请求参数
            console.log("当前请求url地址", config.url);
            
            return config; // 返回配置信息继续向下执行
        },error => {});

        //添加响应拦截器
        axios.interceptors.response.use(res => {
            console.log('响应拦截器成功'); 
            // 在此处可以对响应过来数据进行进一步加工，已达到客户要求
            return res.data; // 继续返回响应的信息
        },error => {});

        // 绑定事件，执行ajax发送
        btn.onclick = async () => {
            // 采用axios的静态方法get()
            const result = await axios({
                url:"http://localhost:3000/stu",
                method:"get",
            });
          
            console.log(result);
        }
        
    </script>

</body>
</html>